<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAKx4k5etAEsgs4MnNrjUH_RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRST6IJK5ZgdOUAlC5MDDpxcDumwA&sensor=true_or_false"
        type="text/javascript">
	</script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        //map.setMapType(G_SATELLITE_MAP);
        map.setCenter(new GLatLng(39.917, 116.397), 14);
 		map.addControl(new GSmallMapControl());//增加地图放大、缩小功能
        // 在随机位置向地图中添加 10 个标记
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 10; i++) {
          var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                                  southWest.lng() + lngSpan * Math.random());
          map.addOverlay(new GMarker(point));
          
        }
      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div>
    <a href="/google/maps/test">google Maps Api test</a></br>
    <a href="/google/maps/markerDrag">google Maps Api markerDrag</a></br>
    <a href="/google/maps/northamericaOffices">google Maps Api markerDrag</a></br>
    </div>
  </body>
</html>